<!--
  布局容器 示例
  @author 邵鹏坤 2022年9月22日
  参考window11 桌面
  1 在此处整合桌面图标组件（navBar）&任务栏组件（taskBar）
  2 数据源：
  使用props从使用者（父组件）接受所有的导航列表，用于渲染桌面图标组件（数量，路由，图标，导航名）
-->
<template>
  <ExampleTitle title="布局容器示例"></ExampleTitle>
  <ExampleTitle title="需要左&右边栏" :row="true"> </ExampleTitle>
  <div class="row-container">
    <WinContainer left-width="30%" right-width="40%" main-width="20%" :left-visible="true" :right-visible="true">
      <template #aside-left><div class="left">left left-width设置宽度</div></template>
      <template #main><div class="main">main 默认自成长宽度</div></template>
      <template #aside-right><div class="right">right 通过right-width设置宽度</div></template>
    </WinContainer>
  </div>
  <MD file-name="leftRightContainer"></MD>
  <ExampleTitle title="需要左边栏" :row="true"> </ExampleTitle>
  <div class="row-container">
    <WinContainer left-width="30%" right-width="40%" main-width="20%" :left-visible="true">
      <template #aside-left><div class="left">left</div></template>
      <template #main><div class="main">main</div></template>
    </WinContainer>
  </div>
  <MD file-name="leftContainer"></MD>
  <ExampleTitle title="需要右边栏" :row="true"> </ExampleTitle>
  <div class="row-container">
    <WinContainer left-width="30%" right-width="40%" main-width="20%" :right-visible="true">
      <template #main><div class="main">main</div></template>
      <template #aside-right><div class="right">right</div></template>
    </WinContainer>
  </div>
  <MD file-name="rightContainer"></MD>
  <ExampleTitle title="不需要侧栏" :row="true"> </ExampleTitle>
  <div class="row-container">
    <WinContainer left-width="30%" right-width="40%" main-width="20%">
      <template #main><div class="main">main</div></template>
    </WinContainer>
  </div>
  <MD file-name="noneContainer"></MD>
  <ExampleTitle title="窗口状态下不需要侧栏，最大化状态下需要侧栏" :row="true"> </ExampleTitle>
  <div class="row-container">
    <WinContainer left-width="30%" right-width="40%" main-width="20%" :left-visible="false" :right-visible="false">
      <template #aside-left><div class="left">left-visible true：窗口状态下需要，false:窗口状态下不需要</div></template>
      <template #main><div class="main">main 固定显示</div></template>
      <template #aside-right
        ><div class="right">right-visible true：窗口状态下需要，false:窗口状态下不需要</div></template
      >
    </WinContainer>
  </div>
  <MD file-name="noNeedAsideContainer"></MD>
</template>

<script setup lang="ts">
  import WinContainer from '@/views/container/winContainer.vue'
  import ExampleTitle from '@/views/components/exampleTitle.vue'
  import MD from '@/views/components/md.vue'
</script>

<style lang="scss" scoped>
  .left {
    height: 100px;
    margin: 12px 8px;
    background-color: aquamarine;
  }
  .main {
    height: 100px;
    margin: 12px 8px;
    background-color: pink;
  }
  .right {
    height: 100px;
    margin: 12px 8px;
    background-color: rgb(47, 218, 248);
  }
</style>
